
<template>
  <div class="block">
      <div class="header">
        <img class="logo" src="http://www.superwritingman.com/assets/favicon.ico">

        <h2>欢迎来到作文超人的宇宙空间</h2>

        <div class="div-down">
            <img class="btn-down" src="http://www.superwritingman.com/assets/app-store.png">
            <img class="btn-down" src="http://www.superwritingman.com/assets/android.png" v-on:click="down_android('http://7xpn2e.com1.z0.glb.clouddn.com/sw/android/android-release1.0.2.apk')">
        </div>
      </div>
    
     <el-carousel :interval="4000" height="500px" background="#3BB5FF">
        <el-carousel-item v-for="item in bannerImgArr" :key="item">
          
            <img :src="item" height="480px">
        </el-carousel-item>
     </el-carousel>  

     <!-- 中间 -->
        <section class="section-2">
            <div class="phone">
                <iframe src="http://139.198.176.121:8080/"></iframe>
            </div>

            <div class="div-right">

                <img class="marker" src="http://www.superwritingman.com/assets/kaboompics_Man_hand_holding_a_green_marker_pen.jpg">

            </div>
        </section>

        <!-- footer -->
        <div class="footer">
                <div class="contacts">
                    <h3>商务合作</h3>
                    <h4>QQ : 244017679</h4>
                    <h4>邮箱 : 244017679@qq.com</h4>
                </div>
                <img class="qrcode" src="http://www.superwritingman.com/assets/qrcode.jpg">
                <img class="btn-down" src="http://www.superwritingman.com/assets/app-store.png">
                <img class="btn-down" src="http://www.superwritingman.com/assets/android.png" onclick="down_android('http://7xpn2e.com1.z0.glb.clouddn.com/sw/android/android-release1.0.2.apk')">

                <div class="icp"><span>沪ICP备18016305号</span> <img src="https://www.qingcloud.com/static/assets/images/ghs.png" style="vertical-align: middle"> 
                    <span>沪公网安备</span>
                </div>
        </div>
  </div>
 
</template>


<script>
export default {
  name:'IndexPage',
  data(){
      return{
          bannerImgArr : [
              'http://7xpn2e.com1.z0.glb.clouddn.com/home/slide-1.png',
              'http://7xpn2e.com1.z0.glb.clouddn.com/home/slide-2.png',
              'http://7xpn2e.com1.z0.glb.clouddn.com/home/slide-3.png',
              
              ]
      }
  },

  methods:{
      down_android(url){
            if (isWeiXin()) {
                console.log('false')
            window.location.href = 'wxGuide';
        } else {
            console.log('true')
            window.location.href = url;
        }
        function isWeiXin() {
            var ua = window.navigator.userAgent.toLowerCase();
            return ua.match(/MicroMessenger/i) == 'micromessenger';
            }
      }
  }
}
</script>

<style>
  
    html, body {
        position: relative;
        height: 100%;
    }

    body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
    }

    .swiper-container {
        margin-top: 10px;
        width: 97%;
    }

    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }

    .header {
        width: 100%;
        height: 80px;
        background: white;
        position: relative;
        display: flex; /*Flex布局*/
        display: -webkit-flex; /* Safari */
        align-items: center; /*指定垂直居中*/
    }

    .logo {
        margin-left: 13%;
    }

    .header h2 {
        margin-left: 13px;
        flex: 1;
    }

    .div-down {
        margin-right: 3%;
    }

    .swiper-slide img {
        width: 100%;
    }

    .footer {
        margin-top: 20px;
        width: 100%;
        min-height: 100px;
        background: #333;
        color: white;
        padding: 20px;
    }

    .footer h4 {
        margin-left: 20px;
    }

    .contacts {
        margin: 40px;
        display: inline-block;
    }

    .qrcode {
        height: 120px;
        float: right;
        margin: 40px;
        cursor: pointer;
    }

    .btn-down {
        height: 38px;
        cursor: pointer;
    }

    .section-2 {
        padding: 0 3%;
        display: flex;
    }

    .div-right {
        flex: 1;
        padding: 5%;
    }

    .marker {
        width: 100%;
    }

    .phone {
        width: 467px;
        height: 800px;
        display: flex;
        justify-content: center;
        margin-top: 40px;
        background: url(http://www.superwritingman.com/assets/iphone.png) no-repeat;
        background-size: 100% auto;
    }

    iframe {
        margin: 80px 0 0 3px;
        width: 340px;
        height: 620px;
        border: 0;
    }

    .icp {
        width: 100%;
        text-align: center;
        font-size: 1em;
    }

    
</style>